﻿@using System.Linq
@using CML.Intercamber.Business
@using CML.Intercamber.Business.Model
@{
    ViewBag.PageTitle = Resources.Intercamber.Chat_PageName;
    Users me = ViewBag.Me;
    UsersDetail dest = ViewBag.Dest;
}

@section PageHead
{
    <link href="~/Content/Discussions.css?@ViewBag.VersionNumber" rel="stylesheet" />
    <script type="text/javascript">
        var currentThreadId = @(ViewBag.IdThread ?? "null");
        var currentDate = null, firstDate = null;
        var me = {
            name: "@(me.FirstName.Replace("\"", ""))",
            id: @me.IdUser,
            flag: '@me.IdCountry',
            lang: '@me.UsersSpokenLanguages.FirstOrDefault().IdLanguage',
            color: "#057A97",
        };
        var dest = {
            name: "@dest.FirstName.Replace("\"", "")",
            id: @dest.IdUser,
            flag: '@dest.IdCountry',
            lang: '@dest.SpokenLanguages',
            color: "#F36507",
        };
        var str = {
            timerPause: "@Resources.Intercamber.Discusion_TimerPause",
            timerStart: "@Resources.Intercamber.Discussion_TimerStart",
            timerStart2: "@Resources.Intercamber.Discussion_TimerStart2",
            timerStop: "@Resources.Intercamber.Discussion_TimerStop",
            timerChange: "@Resources.Intercamber.Discussion_TimerChangeLang",
            timerFinish: "@Resources.Intercamber.Discussion_TimerFinish",
            isWriting: "@Resources.Intercamber.Discussion_IsWriting",
        };

        $(function() {
            window.hubReady.done(function() {
                $('#sendmessage').click(sendTypedMsg);
                if (currentThreadId != null)
                    loadChat(currentThreadId, null, true);
            });
            $("#message").keydown(keyMessage);
            $("button").button();
            timerManager.init();
            translatorManager.init(dest.lang, "@ViewBag.UiLanguage", true);
            helpManager.loadHelpMessages();

            // counts
            refreshUnreadMessagesCount(dest.id, true);
        });

        var lastIsWritingDate = null;

        function keyMessage(e) {
            if (e.keyCode == 13) {
                if ($('#cbEnter').attr('checked')) {
                    sendTypedMsg();
                    return false;
                }
            }
            var now = +new Date();
            if (lastIsWritingDate == null || now - lastIsWritingDate > 15000) {
                lastIsWritingDate = now;
                window.connectedHub.server.isWritingMessage(dest.id, currentThreadId);
            }
            return true;
        }

        function sendTypedMsg() {
            var msg = $('#message').val();
            var idMess = window.connectedHub.server.sendMessage(dest.id, currentThreadId, msg);
            printMessage(idMess, me.id, msg, null, new Date, true);
            scrollToDiscussionBottom();
            $('#message').val('').focus();
            lastIsWritingDate = null;
        }

        function loadChat(id, idLastMess, scrollBottom) {
            currentThreadId = id;
            // load chat history 
            $.ajax({
                type: "POST",
                url: "/Talk/ChatHistory",
                contentType: "application/json; charset=utf-8",
                data: "{'idThread':\"" + currentThreadId + "\", 'messageIdMax':" + idLastMess + "}",
                dataType: "json",
                success: function(result) {
                    $(".loadmore").remove();
                    $(".initialDate").remove();
                    var premiereActionTimer = null;
                    for (var i = 0; i < result.d.length; i++) {
                        var r = result.d[i];
                        if (r.Action == null)
                            printMessage(r.Id, r.IdUser, r.Message, r.Correction, r.Date, false);
                        else {
                            printAction(r.IdUser, r.Action, r.Message, r.Date, false);
                            if (premiereActionTimer == null && r.Action == "timer") {
                                premiereActionTimer = r;
                                timerManager.loadConfig(r.Message);
                            }
                        }
                    }
                    if (result.d.length > 0 && currentDate != null)
                        $('#discussion').prepend("<span class='dateItem initialDate'>" + (new Date(currentDate)).toLocaleDateString() + "</span>");
                    if (result.ps == result.d.length && result.d.length > 0)
                        $('#discussion').prepend("<span class='loadmore' onclick=\"loadChat(currentThreadId," + result.d[result.d.length - 1].Id + ", false)\">@Resources.Intercamber.Discussion_LoadMoreMessages</span>");
                    initCorrections();
                    if (scrollBottom)
                        scrollToDiscussionBottom();
                },
                error: function(result) {
                    debugger;
                }
            });
        }

        function addMessage(id, userId, idThread, action, message, date) {
            if (action == null) {
                printMessage(id, userId, message, null, instanciateDotNetDate(date), true);
                initCorrections();
                window.connectedHub.server.markAsRead(currentThreadId);
            } else {
                printAction(userId, action, message, instanciateDotNetDate(date), true);
                if (action == "timer")
                    timerManager.loadConfig(message);
            }
            scrollToDiscussionBottom();
        }

        var lastDiscussionWriteNotification = null;
        function discussionWriteNotification(userId) {
            lastDiscussionWriteNotification = +new Date();
            $("#userWriting").show().html(str.isWriting.replace("{0}", dest.name));
            setTimeout(discussionWriteNotificationHide, 45000);
        }
        function discussionWriteNotificationHide() {
            var now = +new Date();
            if(lastDiscussionWriteNotification == null || lastDiscussionWriteNotification + 45000 < now)
                $("#userWriting").html("");
            else
                setTimeout(discussionWriteNotificationHide, 45000);
        }

        function scrollToDiscussionBottom() {
            var discussionDiv = $('#discussion');
            discussionDiv.scrollTop(discussionDiv[0].scrollHeight);
        }

        function initCorrections() {
            var ttTarget = $(".message[sender!=u" + me.id + "]");
            $('<div />').qtip({
                content: '@Resources.Intercamber.Discussion_ClickToCorrect',
                position: { target: 'event', effect: false },
                show: { target: ttTarget, effect: false },
                hide: { target: ttTarget },
                style: { classes: "qtip-default ttCorrection" },
            });
            ttTarget.css("cursor", "pointer");
            ttTarget.click(loadCorrector);
        }

        function loadCorrector() {
            if ($(".correctorKo").is(":visible"))
                $(".correctorKo").click();
            $(".corrector").remove();
            var dt = $(this);
            var container = dt.parent().parent();
            var idMessage = dt.attr("id").replace("m", "").replace("ct", "");
            container.after("<div class='corrector'><span id='correctorBtn'>" +
                "<button class='jqSimpleButton correctorOk'><img src='/Images/Check.png' /></button>" +
                "<button class='jqSimpleButton correctorKo'><img src='/Images/Delete.png' /></button></span>" +
                "<textarea rows='2' class='correctorInput'></textarea></div>");
            $("button").button();
            var corr = $("#c" + idMessage).find(".message");
            var txt = corr.length > 0 ? corr : container.find(".message");
            var txtContent = txt.html();
            $("#c" + idMessage).remove();
            var headWidth = $("#m" + idMessage).parent().parent().find('.msgHead').width();
            $(".correctorInput").width($("#talkDiv").width() - headWidth - 40).val(txtContent).css("left", headWidth).focus().select();
            $(".correctorKo").click(function() {
                if (corr.length > 0)
                    addMessageCorrection(idMessage, txtContent);
                $(".corrector").remove();
            });
            $(".correctorOk").click(function() {
                var txtFeed = $(".correctorInput").val();
                $.ajax({
                    type: "POST",
                    url: "/Talk/AddTranslation",
                    contentType: "application/json; charset=utf-8",
                    data: "{'idThread':\"" + currentThreadId + "\", 'idMessage': \"" + idMessage + "\", 'correction':\"" + txtFeed.replace("\"", "\\\"") + "\"}",
                    dataType: "json",
                    success: function(result) {
                        addMessageCorrection(idMessage, txtFeed);
                        $(".corrector").remove();
                        window.connectedHub.server.sendMessageCorrection(currentThreadId, idMessage, txtFeed);
                        initCorrections();
                    },
                    error: function(result) {
                        debugger;
                    }
                });
            });
        }

        function printAction(Idsender, action, param, date, appendBottom) {
            if (typeof(date) == "string")
                date = instanciateDotNetDate(date);
            var dTime = new Date(date);
            dTime.setHours(0, 0, 0, 0);
            dTime = dTime.getTime();
            if (firstDate == null)
                firstDate = dTime;
            var sender = Idsender == me.id ? me : dest;

            var actionStr = "";
            if (action == "timer") {
                var p = param.split(" "); // "start 20140101143513 fr 15 en 25"
                if (p[0] == "start") {
                    actionStr = str.timerStart.replace("{0}", p[3]) + " <img src='/Images/SmallFlags/" + p[2] + ".png'></img> ";
                    if (p.length > 4)
                        actionStr += str.timerStart2.replace("{0}", p[5]) + " <img src='/Images/SmallFlags/" + p[4] + ".png'></img> ";
                } else if (p[0] == "stop")
                    actionStr = str.timerStop;
                else if (p[0] == "pause")
                    actionStr = str.timerPause;
            } else {
                actionStr = action + " " + param;
            }

            var res = "<div class=\"msg\"'>" +
                "<span class='msgHead'>" + date.toLocaleTimeString() + ' <img src="/Images/SmallFlags/' + sender.flag + '.png" /> <label style="color:' + sender.color + '"> ' + sender.name + "</label>:&nbsp;</span> " +
                "<span class='actionLog'>" + actionStr + "</span></div>";

            var dateRes = "";
            if ((!appendBottom && (currentDate == null || dTime != currentDate)) || (appendBottom && firstDate != dTime)) {
                if (currentDate != null)
                    dateRes += "<span class='dateItem'>" + (new Date(currentDate)).toLocaleDateString() + "</span>";
                if (!appendBottom)
                    currentDate = dTime;
                else
                    firstDate = dTime;
            }
            if (appendBottom)
                $("#discussion").append(dateRes + res);
            else
                $("#discussion").prepend(res + dateRes);
        }

        function printMessage(id, Idsender, message, correction, date, appendBottom) {
            $("#userWriting").html("");
            if (typeof(date) == "string")
                date = instanciateDotNetDate(date);
            var dTime = new Date(date);
            dTime.setHours(0, 0, 0, 0);
            dTime = dTime.getTime();
            if (firstDate == null)
                firstDate = dTime;
            var sender = Idsender == me.id ? me : dest;
            var res = "<div class=\"msg\"'>" +
                "<span class='msgHead'>" + date.toLocaleTimeString() + ' <img src="/Images/SmallFlags/' + sender.flag + '.png" /> <label style="color:' + sender.color + '"> ' + sender.name + "</label>:&nbsp;</span> " +
                "<span class='bubble " + (Idsender == me.id ? "bubble2" : "bubble1") + " msgTxt'><div class='arrowLeft1'></div> <label class='message' id='m" + id + "' sender=\"u" + sender.id + "\">" + message + '</label></span></div>';
            var dateRes = "";
            if ((!appendBottom && (currentDate == null || dTime != currentDate)) || (appendBottom && firstDate != dTime)) {
                if (currentDate != null)
                    dateRes += "<span class='dateItem'>" + (new Date(currentDate)).toLocaleDateString() + "</span>";
                if (!appendBottom)
                    currentDate = dTime;
                else
                    firstDate = dTime;
            }

            if (appendBottom)
                $("#discussion").append(dateRes + res);
            else
                $("#discussion").prepend(res + dateRes);
            if (correction != null && correction != "")
                addMessageCorrection(id, correction);
        }

        function addMessageCorrection(id, correction) {
            var dc = $("#tc" + id);
            if (dc == null || dc.length == 0) {
                var dd = $("#m" + id);
                if (dd == null || dd.length == 0) return;
                printCorrectionFormated(dd, id, correction);
            } else
                dc.html(correction);
        }

        function notifyCorrection(id, correction) {
            addMessageCorrection(id, correction);
            var el = $("#tc" + id);
            el.qtip({
                content: "<b>@Resources.Intercamber.Discussion_NewCorrection</b>",
                show: { effect: false },
                position: { at: "center right", my: "center left" },
                style: { classes: "qtip-blue" },
                hide: { event: false, fixed: true }
            }).qtip('show');
            setTimeout(function() { el.qtip('destroy'); }, 5000);
        }

        function printCorrectionFormated(parentEl, id, correction) {
            parentEl.append("<div id='c" + id + "' class='correction'><div class='bubble bubble3'><div class='arrowTop'></div><label class='message' id='ct" + id + "'>" + correction + '</label></div></div>');
        }

        function resizeComplement() {
            var h = $(window).height() - $('#titleTd').height() - $("#menuTd").height();
            if (h < 400) h = 400;
            var discussionDiv = $('#discussion');
            discussionDiv.height(h - $("#discussionInput").height() - 70 - 50);
            $("#talkDiv").height(discussionDiv.height() + $('#discussionInput').height());
        }

        function cbEnterChange() {
            var cbChecked = $('#cbEnter').attr('checked');
            if (cbChecked)
                $("#sendmessage").hide();
            else
                $("#sendmessage").show();
            $('#message').focus();
        }

        var timerManager = new function() {
            this.actCode = "timer";

            this.init = function() {
                $("#timerConfig").qtip({
                    content: { text: $("#ttTimerConf"), title: { text: "@Resources.Intercamber.Discussion_TimerConfig", button: true } },
                    position: { at: "bottom center", my: "top left", viewport: $(window), adjust: { method: "shift", x: 0, y: 0 }, container: $('form') },
                    style: { classes: "qtip-bootstrap" },
                    show: { event: 'click', effect: false },
                    hide: 'unfocus'
                });
                $("#timerSlider1").slider({
                    value: 10,
                    min: 5,
                    max: 30,
                    step: 5,
                    slide: function(event, ui) {
                        timeLang1 = ui.value;
                        $("#timerSlider1Label").html(ui.value + " min");
                    }
                });
                $("#timerSlider2").slider({
                    value: 10,
                    min: 5,
                    max: 30,
                    step: 5,
                    slide: function(event, ui) {
                        timeLang2 = ui.value;
                        $("#timerSlider2Label").html(ui.value + " min");
                    }
                });
                timerManager.loadConfig("stop 0 @me.IdCountry 10 @dest.IdCountry 10");
            };

            this.postAction = function(actParam) {
                doAction(actParam);
                var dateVal = "0", pauseVal = "";
                if (actParam == "start" || actParam == "pause")
                    dateVal = curDate.formatDate("yyyyMMddHHmmss");
                if (actParam == "pause")
                    pauseVal = curPauseDate.formatDate("yyyyMMddHHmmss");
                var param = actParam + " " + dateVal + " " + selLang1 + " " + $("#timerSlider1").slider("value");
                if (selLang2 != null)
                    param += " " + selLang2 + " " + $("#timerSlider2").slider("value");
                if (actParam == "pause")
                    param += " " + pauseVal;
                window.connectedHub.server.sendAction(dest.id, currentThreadId, this.actCode, param);
                printAction(me.id, this.actCode, param, new Date, true);
                scrollToDiscussionBottom();
                if (actParam == "start")
                    timerManager.timerTick();
            };

            this.saveConfAndStart = function() {
                curDate = new Date(), curPauseDate = null;
                timerManager.postAction("start");
            };

            this.cancelConf = function() {
                timerManager.loadConfig(previousConfig);
            };

            var selLang1 = null, selLang2 = null, timeLang1 = null, timeLang2 = null;
            this.editorMode = function(lang1, lang2, btn) {
                if (btn == null)
                    btn = $("#ttTimerBtn_" + lang1 + (lang2 == null ? "" : "_" + lang2));
                selLang1 = lang1, selLang2 = lang2;
                $(".languageSelected").removeClass("languageSelected");
                $(btn).addClass("languageSelected");
                if (lang2 == null)
                    $("#TimerConfLang2").hide();
                else {
                    $("#TimerConfLang2").show();
                    $("#TimerConfLang2Lbl").html("<img src='/Images/SmallFlags/" + lang2 + ".png' />");
                }
                $("#TimerConfLang1Lbl").html("<img src='/Images/SmallFlags/" + lang1 + ".png' />");
            };

            function doAction(code) {
                if (code == "stop") {
                    curDate = null, curPauseDate = null;
                    $("#timerStart").show();
                    $("#timerPause").hide();
                    $("#timerStop").hide();
                }
                if (code == "pause") {
                    $("#timerStart").show();
                    $("#timerPause").hide();
                    $("#timerStop").show();
                    curPauseDate = new Date();
                }
                if (code == "start") {
                    $("#timerStart").hide();
                    $("#timerPause").show();
                    $("#timerStop").show();
                    if (curPauseDate != null && curDate != null) {
                        var now = (new Date()).getTime();
                        curDate = new Date(curDate.getTime() + (now - curPauseDate.getTime()));
                        curPauseDate = null;
                    } else
                        curDate = new Date();
                }
            }

            var curMode = 0;
            this.timerTick = function() {
                if (curDate == null || curPauseDate != null) {
                    return;
                }
                var now = new Date();
                var delta = (now.getTime() - curDate.getTime()) / 1000;

                var estLang1 = selLang1 != null && delta < timeLang1 * 60;
                var estLang2 = !estLang1 && selLang2 != null && delta < (timeLang2 + timeLang1) * 60;
                var newMode = estLang1 ? 1 : (estLang2 ? 2 : 0);
                if (newMode != curMode) {
                    var msg = null;
                    if (newMode == 0)
                        msg = str.timerFinish;
                    if (newMode == 2)
                        msg = str.timerChange.replace("{0}", timeLang2) + " <img src='/Images/SmallFlags/" + selLang2 + ".png'></img> ";
                    if (msg != null) {
                        $("#discussion").append("<div class='msg'><span class='actionLog'>" + msg + "</span></div>");
                        scrollToDiscussionBottom();
                    }
                    curMode = newMode;
                    var newFlagUrl = "url(/Images/Flags/" + (estLang2 ? selLang2 : selLang1) + ".png)";
                    $("#timerFlag").css("background-image", newFlagUrl);
                }

                if (delta < 0 || (!estLang1 && !estLang2)) {
                    $("#timerClock").html("");
                    //$("#timerFlag").css("background-image", "");
                    return;
                }

                var affMinutes = (estLang2 ? timeLang2 + timeLang1 : timeLang1) * 60 - delta;
                var minutes = Math.floor(affMinutes / 60) % 60;
                var seconds = affMinutes % 60;

                $("#timerClock").html(minutes + ":" + (Math.floor(seconds) + "").padL(2, '0'));

                setTimeout(timerManager.timerTick, 500);
            };

            var curDate = null, curPauseDate = null, previousConfig = null;
            this.loadConfig = function(str) {
                previousConfig = str;
                // syntaxe: "start 20140101143513 fr 15 en 25"
                var params = str.split(" ");
                var action = params[0];
                var lang1 = params[2];
                timeLang1 = parseInt(params[3]);
                var lang2 = null;
                timeLang2 = null;
                if (str.length > 5) {
                    lang2 = params[4];
                    timeLang2 = parseInt(params[5]);
                }
                timerManager.editorMode(lang1, lang2, null);
                $("#timerSlider1").slider('value', timeLang2);
                $("#timerSlider1Label").html(timeLang2 == null ? "" : timeLang2 + " min");
                $("#timerSlider2").slider('value', timeLang1);
                $("#timerSlider2Label").html(timeLang1 + " min");

                doAction(action);

                curDate = params[1] != "0" ? dateFromString(params[1]) : null;
                curPauseDate = action == "pause" ? dateFromString(params[params.length - 1]) : null;

                if (action == "start")
                    timerManager.timerTick();
            };
        };

        var helpManager = new function() {
            this.loadHelpMessages = function() {
                initTooltip($("#help_timer"), "@Html.Raw(Resources.Intercamber.Discussion_HelpTimer.Replace("\n", "<br/>").Replace("\r", ""))");
                initTooltip($("#help_translator"), "@Html.Raw(Resources.Intercamber.Discussion_HelpTranslator.Replace("\n", "<br/>").Replace("\r", ""))");
                initTooltip($("#help_user"), "@Html.Raw(Resources.Intercamber.Discussion_HelpUser.Replace("\n", "<br/>").Replace("\r", ""))");
            };

            function initTooltip(ttTarget, txt) {
                $('<div />').qtip({
                    content: "<table><tr><td><img src='/Images/Characters/PersoAide1.png' style=\"margin:3px 10px 5px 0\" \\></td><td>" + txt + "</td></tr></table>",
                    position: { target: 'event', effect: false, at: "bottom center", my: "top right" },
                    show: { target: ttTarget, effect: false },
                    hide: { target: ttTarget },
                    style: { classes: "qtip-bootstrap ttCorrection" }
                });
            }
        };
    </script>
    @Html.Partial("~/Views/Shared/_ProfilViewerPartial.cshtml")
    @Html.Partial("~/Views/Shared/_ModerationPartial.cshtml")
}

@section PageLeftBar
{
    @Html.Partial("~/Views/Shared/_LeftBarUserDetailPartial.cshtml")
}

@section PageContent {
    <table style="height: 70px; width: 100%" cellpadding="0" cellspacing="0">
        <tr>
            <td style="vertical-align: middle; text-align: center;">
                <div class="intermediaryTitle" style="position:relative; height:70px">
                    @Resources.Intercamber.Discussion_TalkWith <br/> <label onclick='profilViewerManager.showProfil(@dest.IdUser);' class='link' style="text-decoration: none">@(dest.FirstName + " " + dest.LastName)</label>
                    <img id="help_user" src="/Images/Help.png" style="position:absolute; right:1px; bottom:1px;"/>
                </div>
            </td>
            <td width="110px" style="vertical-align: top;">
                <div class="ui-corner-all pluginDiv" style="background-color: #3594E7;">
                    <div style="width: 100%; text-align: center; margin-top: 2px; height: 30px;">
                        <div id="timerStart" class="timerButton ui-corner-all" onclick="timerManager.postAction('start')" style="background-image: url(/Images/Play.png);"> </div>
                        <div id="timerPause" class="timerButton ui-corner-all" onclick="timerManager.postAction('pause')" style="background-image: url(/Images/Pause.png);"> </div>
                        <div id="timerStop" class="timerButton ui-corner-all" onclick="timerManager.postAction('stop')" style="background-image: url(/Images/Stop.png);"> </div>
                        <div id="timerConfig" class="timerButton ui-corner-all" onclick="$(this).qtip('show');" style="float: right; margin-right: 10px; background-image: url(/Images/Params.png);"> </div>
                    </div>
                    <div style="width: 100%; text-align: left; padding: 3px 0 6px 20px; vertical-align: top; height: 30px;">
                        <label style="font-size: 24px; color: #44444A; width: 70px" id="timerClock"></label>
                        &nbsp;
                        <span id="timerFlag" style="width: 24px; height: 18px; display: inline-block;"></span>
                    </div>
                    <img id="help_timer" src="/Images/Help.png" style="position:absolute; right:1px; bottom:1px;"/>
                </div>
            </td>
            <td width="255px" style="padding-left: 5px; vertical-align: top;">
                <div class="ui-corner-all pluginDiv" id="divTranslator" style="background-color: #5E58C6; color: white;">
                    <div style="margin-top:2px; padding-top: 8px;">
                        @Resources.Intercamber.Discussions_WordReferenceTitle 
                        <br/>
                        @Html.Partial("~/Views/Shared/_TranslatorPartial.cshtml")
                    </div>
                    <img id="help_translator" src="/Images/Help.png" style="position:absolute; right:1px; bottom:1px;"/>
                </div>
            </td>
            @*<td width="50px" style="padding-left: 5px; vertical-align: top;">
                <div class="ui-corner-all pluginDiv" style="background-color: #FAEE6A; border: 0.5px solid #a6b4c6;">
                    <div style="margin-top:2px">
                        help here     
                    </div>  
                </div>
            </td>*@
        </tr>
    </table>

    <table id="talkDiv" width="100%" cellpadding="0" cellspacing="0" style="margin-top: 8px;" class="ui-corner-all">
        <tr>
            <td>
                <div id="discussion" style="padding: 5px; min-height: 30px; overflow: auto;"></div>
            </td>
        </tr>
        <tr id="discussionInput">
            <td style="vertical-align: top; border: 3px solid #1A5DB1; padding: 3px; position:relative;" class="ui-corner-all">
                <div style="float: right; margin-top:-27px; margin-right:15px;" onclick="moderationManager.showModeration(dest.id, 'Discussion', currentThreadId)" class="link">@Resources.Intercamber.Moderation_ModerateMessage</div>
                <div>
                    <textarea rows="2" style="width: 100%; border: 0.3px dotted lightgray; padding: 2px; " id="message" aria-label="@Resources.Intercamber.Discussion_WriteaMessage" placeholder="@Resources.Intercamber.Discussion_WriteaMessage"></textarea>
                </div>
                <span style="float: left; display:none" id="userWriting" ></span>
                <span style="float: right;" >
                    <input type="checkbox" id="cbEnter" checked="checked" onclick=" cbEnterChange() " />
                    <label for="cbEnter">Press Enter to send</label>
                    <span>
                        <button id="sendmessage" value="Send" style="display: none; padding: 0 5px; margin-left: 10px;" class="jqSimpleButton">
                            <img src="/Images/Mail.png" />&nbsp;@Resources.Intercamber.Discussion_Send</button>
                    </span>
                </span>
            </td>
        </tr>
    </table>
    
    <div id="ttTimerConf" style="display: none">
        <div style="width: 220px">
            <div id="@("ttTimerBtn_" + me.IdCountry)" style="display: inline-block;" class="imgButton" onclick=" timerManager.editorMode('@me.IdCountry', null, this) ">
                <img src="/Images/SmallFlags/@(me.IdCountry).png" />
            </div>
            &nbsp;&nbsp;
            <div id="@("ttTimerBtn_" + dest.IdCountry)" style="display: inline-block;" class="imgButton" onclick=" timerManager.editorMode('@dest.IdCountry', null, this) ">
                <img src="/Images/SmallFlags/@(dest.IdCountry).png" />
            </div>
            &nbsp;&nbsp;
            <div id="@("ttTimerBtn_" + me.IdCountry + "_" + dest.IdCountry)" style="display: inline-block;" class="imgButton" onclick=" timerManager.editorMode('@me.IdCountry', '@dest.IdCountry', this) ">
                <img src="/Images/SmallFlags/@(me.IdCountry).png" /> <img src="/Images/ArrowRight.png" /> <img src="/Images/SmallFlags/@(dest.IdCountry).png" />
            </div>
            &nbsp;&nbsp;
            <div id="@("ttTimerBtn_" + dest.IdCountry + "_" + me.IdCountry)" style="display: inline-block;" class="imgButton" onclick=" timerManager.editorMode('@dest.IdCountry', '@me.IdCountry', this) ">
                <img src="/Images/SmallFlags/@(dest.IdCountry).png" /> <img src="/Images/ArrowRight.png" /> <img src="/Images/SmallFlags/@(me.IdCountry).png" />
            </div>
        </div>
        <div style="margin-top: 4px;" id="TimerConfLang1">
            <label id="TimerConfLang1Lbl"><img src="/Images/SmallFlags/@(me.IdCountry).png" /></label>
            <div id="timerSlider1" style="display: inline-block;"></div>
            <label id="timerSlider1Label">15 min</label>
        </div>
        <div style="margin-top: 4px;" id="TimerConfLang2">
            <label id="TimerConfLang2Lbl"><img src="/Images/SmallFlags/@(dest.IdCountry).png" /></label>
            <div id="timerSlider2" style="display: inline-block;"></div>
            <label id="timerSlider2Label">15 min</label>
        </div>
        <div style="margin-top: 10px;">
            <button onclick=" timerManager.saveConfAndStart(); $('#timerConfig').qtip('hide'); return false; ">@Resources.Intercamber.Discussion_TimerSaveStart</button>
            <button onclick=" $('#timerConfig').qtip('hide'); return false; ">@Resources.Intercamber.Cancel</button>
        </div>
    </div>
}